<script setup lang="ts">
import {
  HomeFilled,
  Tickets,
  Goods,
  Setting,
  User,
  UserFilled,
  BellFilled,
} from "@element-plus/icons-vue"; //导入图标
import { useRouter, useRoute } from "vue-router"; //导入路由函数
//获得路由实例
const route = useRoute();
//获得路由实例
const router = useRouter();
//鼠标点击左侧菜单
function clickMenu(key: string) {
  router.push(key);
}
</script>
<template>
  <section class="menu">
    <div><img src="@/assets/images/logol.jpg" /></div>
    <div>
      <el-menu
        @select="clickMenu"
        :default-active="route.path"
        mode="vertical"
        background-color="#303133"
        text-color="#FFFFFF"
        active-text
        color="#FFFFFF"
      >
        <el-menu-item index="/index">
          <el-icon><HomeFilled /></el-icon>
          <span>后台首页</span>
        </el-menu-item>
        <el-menu-item index="/category">
          <el-icon><Tickets /></el-icon>
          <span>分类管理</span>
        </el-menu-item>
        <el-menu-item index="/goods">
          <el-icon><Goods /></el-icon>
          <span>商品管理</span>
        </el-menu-item>
        <el-sub-menu index="/account">
          <template #title>
            <el-icon><Setting /></el-icon>
            <span>账号设置</span>
          </template>
          <el-menu-item index="/user">
            <el-icon><User /></el-icon>
            <span>用户设置</span>
          </el-menu-item>
          <el-menu-item index="/manager">
            <el-icon><UserFilled /></el-icon>
            <span>管理员设置</span>
          </el-menu-item>
        </el-sub-menu>
        <el-menu-item index="/person">
          <el-icon><BellFilled /></el-icon>
          <span>个人中心</span>
        </el-menu-item>
      </el-menu>
    </div>
  </section>
</template>
<style scoped>
.menu {
  background-color: #303133;
  color: #ffffff;
  width: 200px;
  height: 100%;
}
.menu > div:first-child {
  width: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.menu > div:first-child > img {
  width: 60px;
  height: 50px;
  margin: 10px auto;
}
.menu > div:last-child {
  width: 200px;
  border: 1px solid #303133;
}
.menu > div:last-child .el-menu {
  width: 200px;
}
.el-menu .is-active {
  background: linear-gradient(90deg, #1493fa, #01c6fa);
}
</style>
